import {h, reactive, ref} from 'vue'

class KVueRouter {
    constructor(options) {
        this.$options = reactive(options)

        this.$options.current = ref('/')


        window.addEventListener('hashchange', () => {
            this.$options.current = window.location.hash.slice(1)
        })
    }

    install(app) {

        app.config.globalProperties.$router = this

        app.component('router-link', {
            props: {
                to: {
                    type: String,
                    required: true
                }
            },
            render() {
                return h('a', {href: '#' + this.to}, this.$slots.default())
            }
        })
        app.component('router-view', {
            render() {
                let component = null
                this.$router.$options.routes.forEach(route => {
                    if(route.path === this.$router.$options.current) {
                        component = route.component
                    }

                })
                console.log(component)
                return h(component)
            }
        })
    }
}


export default KVueRouter